<template>
   <div style="background: #F7F7F7">
	   <!-- <div v-if="detailfailfalse"> -->
			<!-- <div v-if="!successfalse"> -->
			   <div class="timeall">
				 <p class="time">订单将在30分钟后自动关闭，请您尽快支付！</p>
				 <div style="padding-bottom: 0.34rem;padding-top:0.3rem;background: #fff">
				   <div class="n">
					 <img :src="imgurl+coursearr.good_thumb" alt="" class="img1">
					 <div class="right">
					   <p>{{coursearr.good_name}}</p>
					   <p>
						 <span>{{coursearr.tag}}</span>
						 <span>￥{{coursearr.xprice}}</span>
					   </p>
					 </div>
				   </div>
				 </div>

				 <!--选择优惠券-->
					 <div v-if="rate!=''">
					 <!-- <div v-if="(youid!=''||youid!='0'||youid!=0)||(youid1!=''||youid1!='0'||youid1!=0)"> -->
					 <!-- <div v-if="(youid==''||youid=='0'||youid==0)&&(youid1==''||youid1=='0'||youid1==0)"> -->
						 <mt-cell title="优惠券" is-link value="已选择"  @click.native="youhui()" style="margin-top: 0.2rem;">
							<img slot="icon" src="../../../src/assets/img/buy/youhui.png" style="width: 0.32rem;margin-right: 0.2rem">
						 </mt-cell>
					 </div>
					 <div v-else>
						 <mt-cell title="优惠券" is-link value="请选择"  @click.native="youhui()" style="margin-top: 0.2rem;">
							<img slot="icon" src="../../../src/assets/img/buy/youhui.png" style="width: 0.32rem;margin-right: 0.2rem">
						 </mt-cell>
					 </div>

				 <p class="buy">选择支付方式：</p>

				 <!--支付宝或者微信支付-->
				 <div class="orderpay">
					<div class="everypay" @click="choosepay(1)">
						<div class="everyleft">
							<div class="everypic">
								<img src="../../../src/assets/img/youyue.png" alt="">
							</div>
							<div class="everytitle">赛思币支付<span>({{coursearr.user_money}})</span></div>
						</div>
						<div class="everyright">
							<img v-if="chooseyu" src="../../../src/assets/img/chooseactive.png" alt="">
							<img v-else src="../../../src/assets/img/choose.png" alt="">
						</div>
					</div>
					<div class="everypay" @click="choosepay(2)">
						<div class="everyleft">
							<div class="everypic">
								<img src="../../../src/assets/img/buy/weixin.png" alt="">
							</div>
							<div class="everytitle">微信支付</div>
						</div>
						<div class="everyright">
							<img v-if="choosewechat" src="../../../src/assets/img/chooseactive.png" alt="">
							<img v-else src="../../../src/assets/img/choose.png" alt="">
						</div>
					</div>
				 </div>
				 
				  <p class="buy">订单信息：</p>
				  <div v-if="type==3||type=='3'">
					    <div class="typeinfo clearfix" v-for='(item,index) in spec_name'>
						   <div class="typeinfoleft" v-if="index==0||index=='0'">购买阶段</div>
						   <div class="typeinforight" :class="index!=0||index!='0'?'rightleft':''">{{item}}</div>
						</div>
				  </div>
					<!-- <div class="typeinfo">
					   <div class="typeinfoleft">订单总额</div>
					   <div class="typeinforight">￥{{coursearr.xprice}}元</div>
					</div> -->
					<div class="typeinfo">
					   <div class="typeinfoleft">订单总额</div>
					   <div class="typeinforight">￥{{coursearr.xprice}}元</div>
					</div>
					<div class="typeinfo">
					   <div class="typeinfoleft">优惠券</div>
					   <div v-if="rate==''" class="typeinforight">未使用</div>
					   <div  v-else class="typeinforight">
						   <span v-if="typeyou==1">
                              {{rate}}折劵
						   </span>
							<span v-if="typeyou==2">
								 满减劵{{reduction}}元
							</span>
						   
					  </div>
					</div>
					<div class="typeinfo">
					   <div class="typeinfoleft">实付款</div>
					   <div class="typeinforight">￥{{amount}}元</div>
					</div>
						
					 <div class="allor">
					   <div class="closeorder" @click="closeorder()">取消订单</div>
					 </div>
				</div>
				 <!--确认支付-->
				<button class="zhifu" v-if="choosetype==2||choosetype=='2'" @click="payorder(coursearr.id)">确认支付</button>
				<div v-else>
					<button class="zhifu" v-if='Number(amount)>Number(coursearr.user_money)' @click="czhi()">赛思币不足支付，点击充值</button>
					<button class="zhifu" v-else @click="payorder(coursearr.id)">确认支付</button>
				</div>
				<!-- 绑定微信 -->
				<div class="shoewr-chenhoupass">
					<div class="chen-contener chenpass">
						<p class="chen-title">温馨提示</p>
						<p class="chen-text chen-textactive">您的账号没有绑定微信，不能使用微信支付</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclose()">取消</p>
							<p class="chen-but-yes" @click="repeatclick()">去绑定</p>
						</div>
					</div>
				</div>
			<!-- </div> -->
			<!-- 支付成功 -->
			<div class="detailsuccess">
				<div class="detailcontent">
					<div class="successtop">
						<div class="successpic">
							<img src="../../../src/assets/img/paytansuccess.png" alt="">
						</div>
						<div class="success_order">
							<img src="../../../src/assets/img/paysuccesstext.png" alt="">
						</div>
						<div class="success_ordertext">
						 <p>订单编号：{{order_sn}}</p>
						</div>
						<div class="successbottom">
							<!-- <div @click="backindex()">返回首页</div> -->
							<div class="successactive" @click="stuindex()">前去学习</div>
						</div>
					</div>
				</div>
			</div>
		
		<!-- 支付取消弹窗 -->
			<div class="detailfail">
				<div class="detailcontent">
					<div class="successtop">
						<div class="successpic">
							<img src="../../../src/assets/img/failsu.png" alt="">
						</div>
						<div class="success_order">
							<img src="../../../src/assets/img/failtext.png" alt="">
						</div>
						<div class="successbottom">
							<!-- <div @click="backindex()">返回首页</div> -->
							<div class="successactiveback" @click="stuback()">返回</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 取消订单弹窗 -->
			<div class="datishower">
				<div class="chen-free">
					<div class="chen-contener1 chenpass">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textactive">订单正在支付是否取消？</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="nobutclick()">取消</p>
							<p class="chen-but-yes" @click="butclick()">继续支付</p>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 确定微信支付是否完成 -->
			<div class="wxpayshower">
				<div class="chen-free">
					<div class="chen-contener1 chenpass">
						<p class="chen-text chen-textactive">请确定微信支付是否已完成</p>
						<div class="finishpay" @click="finishclick()">已完成支付</div>
						<div class="finishpay1" @click="againclick()">支付遇到问题，重新支付</div>
					</div>
				</div>
			</div>
			
			<!-- 评论审核弹窗 -->
			<div class="shoewr-chen">
				<div class="chen-contener">
					<p class="chen-title">提示</p>
					<p class="chen-text">vip用户不能使用该课程的优惠券</p>
					<p class="chen-button" @click="chenclick()">确定</p>
				</div>
			</div>
		<!-- </div> -->
   </div>
</template>

<script>
    export default {
        name: "Order",
      data(){
          return{
		    time:'',
            radio:0,
			id:'',  //课程id
			type:1,  //1课程
			imgurl:this.$store.state.img,
			coursearr:'',
			youid:'',
			chooseyu:false,
			choosewechat:true,
			choosetype:2,
			order_id:'',  //订单记录id
			order_sn:'',  //订单编号
			amount:'',  //课程折扣价
			rate:'',
			specids:'',   //班级选择购买的阶段id
			spec_name:'',
			is_band_wechat:0,   //是否绑定微信  1绑定
			ispay:0,
			timer:null,
			pay:0,
			successfalse:false,   //是否支付成功
			detailfailfalse:true,  //false取消订单成功
			xprice:'',  //支付原价
			youid1:'',
			use_coupon:'',   //是否可用优惠券 1是 0否
			type1:'',
			typeyou:localStorage.getItem('type'),
			reduction:localStorage.getItem('reduction'),
          }
      },
      methods:{
		  finishclick(){
			$('.wxpayshower').fadeOut();
			// this.$router.go(-1) 
			this.$router.push({
			   path:'/buy'
			})
		  },
		  againclick(){
		  		$('.wxpayshower').fadeOut();
		  },
		  chenclick(){
			 $('.shoewr-chen').fadeOut(); 
		  },
		  // 取消订单
		  closeorder(){
			  $('.datishower').fadeIn();
		  },
		  // 取消订单点击取消
		  butclick(){
			 $('.datishower').fadeOut();
		  },
		  // 点击返回首页
		  backindex(){
		  	this.$router.push({
		  	  path:'/'
		  	})
		  },
		  // 点击返回
		  stuback(){
			 // this.$router.go(-1);
			 $('.detailfail').fadeOut();
		  },
		  stuindex(){
		  	// this.$router.go(-2);
		  	var type = this.type;
		  	var id = this.id;
			this.$router.go(-1);
		  },
		     // 点击取消
		    repeatclose(){
				$('.shoewr-chenhoupass').fadeOut();
			},
			// 点击去绑定微信
			repeatclick(){
				var mainpath = this.$store.state;
				// var url1 = this.$route.fullPath;
				// var url = url1.split("/")[1];
				//判断是否在微信打开
				var url1 = this.$route.fullPath;
				var url2 = encodeURIComponent(url1);
				
				var urllogin = window.location.href.split(':')[0];
				
				window.localStorage.setItem('hrefurl',url2);
				var href = mainpath.url+'User/WechatLogin?to='+urllogin+'&route=gd&fromsource='+mainpath.fromsource+'';
				window.location.href = href;
			},
			// 点击充值
			czhi(){
				this.$router.push({
				  path:'/zaixiancongzhi',
				})
			},
			// 点击取消订单
			nobutclick(){
				var that = this;
				that.axios.get(that.$store.state.url + "user/cancelOrder",{
					params:{
						id:that.order_id,
					}
				}).then(res=>{
				  // console.log(res.data)
				  if (res.data.errcode == 0||res.data.errcode == '0'){
					  // this.detailfailfalse = false;
					  // $('.datishower').fadeIn();
					  // sessionStorage.setItem('failfalse',1);
					  layer.open({
					  	content: '您的订单已取消',
					  	skin: 'msg',
					  	time: 2 //1秒后自动关闭
					  }); 
					  var that = this;
					  setTimeout(function(){
					    that.$router.go(-1);
					  },1000)
				  }else{
					 layer.open({
					 	content: res.data.msg,
					 	skin: 'msg',
					 	time: 2 //1秒后自动关闭
					 }); 
				  }
				})
			},
			// 点击优惠券
			youhui(){
				var use_coupon = this.use_coupon;
				if(use_coupon==1||use_coupon=='1'){
					 this.$router.push({ 
					   path:'/chooseyou',
					 	query:{
							price:this.coursearr.xprice,
						//	type:this.type1,
							// id:this.id,
							 order_id:this.order_id	     
						}
					 })
				}else{
					$('.shoewr-chen').fadeIn();
				}
			},
			// 点击选择支付方式
			choosepay(choosetype){
				this.choosetype = choosetype;
				if(choosetype==1||choosetype=='1'){
					this.chooseyu=true;
					this.choosewechat=false;
				}else{
					this.chooseyu=false;
					this.choosewechat=true;
				}
			},
			// 课程生成订单
			courseOrder(){
				var type = this.type;
				var url = this.$store.state.url +'Pay/orderPay';
				var data ={
					id:this.order_id
				}
				this.axios.get(url,{
					 params:data
				}).then(res=>{
					if(res.data.errcode==0||res.data.errcode=='0'){
						var data = res.data.data;
						//console.log(data)
						this.type1=data.type
						this.coursearr=data;
						this.id = data.good_id;
						this.spec_name = data.spec_name;
						this.order_id = data.id;
						this.xprice = data.xprice;
						this.amount = data.amount;
						this.use_coupon = data.use_coupon;
						// if(this.pay==1||this.pay=='1'){
						  this.youid1 = data.coupon_rate;
						// }
						this.rate = data.coupon_rate;
						// console.log(this.youid);
						sessionStorage.setItem('order_sn',this.coursearr.order_sn);
						this.order_sn = this.coursearr.order_sn;
						if(sessionStorage.getItem('youid')){
							// console.log(sessionStorage.getItem('youid'))
						  this.orderPrice(this.order_id);
						}
					}else if(res.data.errcode==1002){
                      	this.$toast({
						message:res.data.msg,
						position:'center'
					});
                     this.$router.go(-1);

					}
				})
			},
			// 选择优惠券后计算订单价格
			orderPrice(order_id){
				// console.log(youid)
				if(sessionStorage.getItem('youid')){
					var youid = sessionStorage.getItem('youid');
					if(youid==0||youid=='0'){
						var data = {
							id:order_id,
						}
					}else{

						var data ={
							 id:order_id,
							 coupon_id:youid
						}
					}
					this.axios.get(this.$store.state.url +'Pay/orderPrice',{
						 params:data
					}).then(res=>{
						if(res.data.errcode==0||res.data.errcode=='0'){
							var data = res.data.data;
							this.amount = data.amount;
							this.rate = data.rate;
						}else{
							this.$toast({
								message:res.data.msg,
								position:'center'
							});
                           
						  	
						}
					})
				}
			},
				
			// 点击确认支付
			payorder(id){
				window.localStorage.removeItem('type')
				window.localStorage.removeItem('reduction')
				//判断是否在微信中打开
				var ua = navigator.userAgent.toLowerCase();
				var isWeixin = ua.indexOf('micromessenger') != -1;
				var choosetype = this.choosetype;
				if(choosetype==0||choosetype=='0'){
					this.$toast({
						message:'请选择支付方式',
						position:'center'
					});
				}else{
					// console.log(888)
					var that = this;
					if(choosetype==2||choosetype=='2'){
						if (isWeixin) {
							if(that.is_band_wechat==1||that.is_band_wechat=='1'){
								that.axios({
									method:'get',
									url:that.$store.state.url +'Wxpay/jsApi',
									params:{
										id:id
									}
								}).then(res=>{
									// alert(res.data.data);
									if(res.data.errcode==0||res.data.errcode=='0'){
										var data = res.data.data;
										var data1 ={
											'appId': data.appId,
											'nonceStr': data.nonceStr,
											'package': data.package,
											'paySign': data.paySign,
											'signType': data.signType,
											'timeStamp': data.timeStamp,
										}
										that.callpay(data1);
										that.setTime();  
									}else{
										that.$toast({
											message:res.data.msg,
											position:'center'
										});
									}
								})
							}else{
								$('.shoewr-chenhoupass').fadeIn();
							}
						}else{
							that.axios({
								method:'get',
								url:that.$store.state.url +'Wxpay/mwebPay',
								params:{
									id:id
								}
							}).then(res=>{
								// alert(res.data.data);
								if(res.data.errcode==0||res.data.errcode=='0'){
									var data = res.data.data;
									var urlred = window.location.href+'&typepay=1'
									var url = data+'&redirect_url='+encodeURIComponent(urlred)+'';
									// console.log(url)
									window.location.href=url; 
								}else{
									that.$toast({
										message:res.data.msg,
										position:'center'
									});
								}
							})
							
						}
					}else{
						that.axios({
						  method:'get',
							url:that.$store.state.url +'Pay/accountPay',
							params:{
								id:id
							}
						}).then(res=>{
							if(res.data.errcode==0||res.data.errcode=='0'){
								setTimeout(function(){
									that.success();
// 									that.$router.push({
// 									  path:'/orderSuccess',
// 										query:{
// 											id:that.coursearr.good_id,
// 											order_id:that.coursearr.order_sn,
// 											type:that.type
// 										}
// 									})
								},1000)
							}else{
								that.$toast({
								  message:res.data.msg,
								  position:'center'
								});
							}
						})
					}
				}
					
			},
				
			callpay(data){
			  if (typeof WeixinJSBridge == "undefined"){
			
				if( document.addEventListener ){
				  document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
				}else if (document.attachEvent){
				  document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
				  document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
				}
			  }else{
				var that = this;
				that.jsApiCall(data);
			  }
			},
			jsApiCall(data){
			  WeixinJSBridge.invoke(
				'getBrandWCPayRequest',
				data,
				function(res){
				  // alert(res);
				  // alert(JSON.stringify(res));
				  if(res.err_msg == "get_brand_wcpay_request:ok" ) {
				
				  }else{
					// alert('支付失败');
					$('.detailfail').fadeIn();
				  }
				}
			  );
			},
			success(){
				var that = this;
				that.successfalse = true;
				that.detailfailfalse = true;
				// $('.detailsuccess')
				$('.detailsuccess').fadeIn();
				sessionStorage.setItem('successfalsesess',1);

			},
			setTime(){
				var that = this;
				var thatstate = that.$store.state;
				that.timer = setInterval(function () {
					// console.log(888)
					that.axios({
					  method:'get',
						url:thatstate.url +'Wxpay/query',
						params:{
							order_sn:that.coursearr.order_sn
						}
					}).then(res=>{
						if(res.data.errcode=='0'||res.data.errcode==0){
							that.success();
						}
					})
				},1000)
			},
			pushHistory() {
				var state = {
					title: "title",
					url: "#"
				};
				window.history.pushState(state, "title", "#");
			}
      },
      watch: {
        value (val) {
          console.log(val)
        },
      },
		destroyed() {
			sessionStorage.removeItem('youid');
			sessionStorage.removeItem('tapfalse');
			sessionStorage.removeItem('successfalsesess');
			sessionStorage.removeItem('failfalse');
			sessionStorage.removeItem('order_sn');
			
			clearInterval(this.timer);
			
		},
		mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);
			this.loginsuccess();
			var id = this.$route.query.id;
			var type = this.$route.query.type;
			// this.pay = this.$route.query.pay;
			this.id=id;
			this.type=type;   //1课程  3班级
			// if(this.$route.query.pay){
			this.order_id = this.$route.query.order_id;
			
			
			if(this.$route.query.typepay){
				var typepay = this.$route.query.typepay;
				if(typepay==1||typepay=='1'){
					$('.wxpayshower').fadeIn();
				}
			}
			
			// 获取订单详情
			this.courseOrder();
			
			if(sessionStorage.getItem('successfalsesess')){
				var successfalsesess = sessionStorage.getItem('successfalsesess');
				if(successfalsesess==1||successfalsesess=='1'){
				  this.successfalse = true;
				  this.detailfailfalse = true;
				  $('.detailsuccess').fadeIn();
				  if(sessionStorage.getItem('order_sn')){
					  var order_sn = sessionStorage.getItem('order_sn');
					  this.order_sn = order_sn;
				  }
				}
			}
			
			if(sessionStorage.youid){
				// console.log(8989)
				this.youid = sessionStorage.getItem('youid');
				// console.log(this.youid);
			}
			
			if(sessionStorage.getItem('failfalse')){
				var failfalse = sessionStorage.getItem('failfalse');
				if(failfalse==1||failfalse=='1'){
				  this.successfalse = true;
				  this.detailfailfalse = false;
				  $('.datishower').fadeIn();
				}
			}
			
			
			this.axios.get(this.$store.state.url + "User/getUserInfo").then(res=>{
			  // console.log(res.data)
			  if (res.data.errcode == 0||res.data.errcode == '0'){
				  this.is_band_wechat = res.data.data.is_band_wechat;
			  }
			})
			
			
			
			
		}
    }
</script>

<style scoped>
	.typeinfo{
		/* width: 6.9rem; */
		/* margin: auto; */
		padding: 0 .3rem;
		display: flex;
		justify-content: space-between;
		background: #fff;
		line-height: .9rem;
		border-bottom: 1px solid #EDEDED;
	}
	.typeinfo:last-child{
		border-bottom: none;
	}
	.rightleft{
		width: 100% !important;
	}
	.typeinfoleft{
		color: #666666;
		font-size: .3rem;
	}
	.typeinforight{
		/* float: right; */
		width: 80%;
		text-align: right;
		color: #333333;
		font-size: .3rem;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.allor{
		width:92%;
		margin: auto;
		 display: flex;
		justify-content: flex-end;
	}
	.closeorder{
		width: 1.54rem;
		height: .48rem;
		border: 1px solid #666666;
		text-align: center;
		line-height: .48rem;
		color: #666666;
		font-size: .24rem;
		border-radius: .24rem;
		margin-top: .3rem;
		
	}
	.timeall{
		padding-bottom:2rem;
	}
	.orderpay{
		background: #fff;
		width: 100%;
		margin-top:.3rem;
	}
	.everypay{
		width: 6.9rem;
		height: .9rem;
		margin: auto;
		line-height: .9rem;
		font-size: .3rem;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EDEDED;
	}
	.everyleft{
		display: flex;
		justify-content:flex-start;
	}
	.everypic{
		width: .32rem;
		height: .32rem;
	}
	.everypic img{
		width: 100%;
		height: 100%;
		vertical-align: middle !important;
	}
	.everyright{
		width: .3rem;
		height: .3rem;
	}
	.everyright img{
		width: 100%;
		height: 100%;
		vertical-align: middle !important;
	}
  >>>.van-cell__title{
    font-size: 0.3rem;
    color: #333;
    text-indent: 0.7rem;
  }
	.everytitle{
		color: #333;
		margin-left: .32rem;
	}
	.everytitle span{
		color: #FF0214 !important;
		display: inline-block;
	}
  >>>.van-cell{
    height: 0.96rem;
  }
  .mint-cell{
    min-height: 0.96rem!important;
  }
    .time{
      width: 100%;
      height:0.5rem;
      background:rgba(252,229,211,1);
      text-align: center;
      line-height: 0.5rem;
      font-size: 0.24rem;
      color: #E22F3A;
    }
    .n{
      width: 92%;
      height: 1.18rem;
      margin: auto;
    }
    .img1{
      width: 2.1rem;
      height: 100%;
      float: left;
      border-radius: 0.08rem;
    }
    .right{
      width: calc(92% - 1.8rem);
      height: 100%;
      float: right;
    }
    .right p{
      width: 100%;
    }
    .right p:nth-child(1){
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
	  display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
    }
    .right p:nth-child(2){
      margin-top: 0.15rem;
    }
    .right p:nth-child(2) span:nth-child(1){
      background:rgba(255,255,255,1);
      border:0.01rem solid rgba(2,135,255,1);
      border-radius:0.19rem;
      padding: 0.05rem 0.17rem 0.05rem 0.17rem;
      font-size: 0.24rem;
      color:rgba(2,135,255,1);
      line-height:0.32rem;
    }
    .right p:nth-child(2) span:nth-child(2){
      float: right;
      font-size:0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
      line-height:0.32rem;
    }
  .buy{
    font-size:0.24rem;
    color:rgba(102,102,102,1);
    line-height:0.32rem;
    margin-top: 0.5rem;
    margin-left: 0.3rem;
	margin-bottom: .29rem;
  }
  .zhifu{
    width: 100%;
    height:0.88rem;
    background:rgba(255,2,20,1);
    position: fixed;
    bottom: 0;
    border: none;
    outline: none;
    font-size:0.36rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
  }
  .wx,.zfb{
    width: 0.32rem;
    height: 0.32rem;
  }
  .zfb{
    position: absolute;
    top:calc(0.47rem - 0.16rem);
    left: 0.3rem;
  }
  .wx{
    position: absolute;
    top: calc(0.94rem + 0.48rem - 0.16rem);
    left: 0.3rem;
  }
  
  /* 支付成功 */
  .successtop{
  	width: 100%;
  	height: 5.65rem;
  	position: relative;
  }
  .successpic{
  	width: 100%;
  	height: 5.65rem;
  	position:absolute;
  }
  .successpic img{
  	width: 100%;
  	height: 100%;
  }
   .success_order{
  	position: absolute;
	width: 3.45rem;
	height: 1.6rem;
	top: .73rem;
	left: 50%;
	margin-left: -1.725rem;
  	/* bottom: .76rem; */
  }
  .detailfail .success_order{
	  width: 4.18rem;
	  margin-left: -2.09rem;
  }
   .success_order img{
	  width: 100%;
	  height: 100%;
  }
  .success_ordertext{
	  width: 100%;
	  position: absolute;
	 color: #FFFFFF;
	 font-size: .24rem;
	 top: 2.7rem;
  }
  .success_ordertext p{
	 text-align: center;
  }
  
  .successbottom{
	position: absolute;
	bottom: .77rem;
	width: 100%;
  }
  .successbottom div{
  	width: 2.6rem;
  	height: .7rem;
  	text-align: center;
  	line-height: .7rem;
  	color: #0287FF;
  	border: 1px solid #0287FF;
  	font-size: .28rem;
  	border-radius: .35rem;
	margin: auto;
  }
  .successactiveback{
	  color: #999999 !important;
	  border: 1px solid #999999 !important;
  }
  
  /* 支付取消 */
  /* .detailfail .successtop{
  	width: 100%;
  	height: 3.87rem;
  	position: relative;
  }
  .detailfail .successpic{
  	width: 100%;
  	height: 3.87rem;
  	position:absolute;
  }
  .detailfail .successpic img{
  	width: 100%;
  	height: 100%;
  } */
 


</style>
